<template>
  <div class="container" v-loading="status_loading">
    <el-row>
      <el-form :model="formInline">
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.areashift.takeoff')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.takeoffcode"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.areashift.taskoffusername')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.taskoffusername"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.areashift.code')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.areashiftcode"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.areashift.takedate')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.taskoffdate"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.createdate')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.createdate"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <h2 class="title" style="margin-bottom:30px">{{$t('m.areashift.takeinfo')}}</h2>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="table"
          stripe
          empty-text
          fits
          class="single-select-table"
          :data="tableData"
          :row-style="tableRowStyle"
          :row-class-name="rowClassName"
          @row-click="rowClick"
          @selection-change="handleSingleSelectionChange">
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="areashiftdetailcode" label="Shift Area Task Detail"></el-table-column>
          <el-table-column label="Status" align="center" prop="state">
            <template slot-scope="scope">{{scope.row.detailstate|stateFilter(lan)}}</template>
          </el-table-column>
          <el-table-column label="TakeOff Location" align="center" prop="sourcelocationcode"></el-table-column>
          <el-table-column align="center" prop="productspeccode" label="SKU"></el-table-column>
          <el-table-column align="center" prop="productname" label="ProductName"></el-table-column>
          <el-table-column align="center" prop="productspec" label="Specification"></el-table-column>
          <el-table-column align="center" prop="batchnum" label="BatchNum"></el-table-column>
          <el-table-column align="center" prop="quantity" label="Shift Qty"></el-table-column>
          <el-table-column align="center" label="Operation">
            <template slot-scope="scope">
              <el-button @click="print(scope.row)" type="primary" size="mini">{{$t('m.print')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="btns">
          <el-button @click="$router.back(-1)">{{$t('m.back')}}</el-button>
        </div>
      </el-col>
    </el-row>
     <!-- 打印 start -->
    <transPrint
      :popupLoading="popupLoading"
      v-if="printVisible"
      :popupVisible="printVisible"
      :detail="popupData"
      @close="printVisible=false"
    ></transPrint>
    <!-- 打印dialog end -->
  </div>
</template>

<script>
import common from '@/utils/common'
import transPrint from './print-detail'
export default {
  data(){
    return {
      status_loading:false,
      formInline:{},
      tableData:[],
      dialogFormVisible:false,
      formLabelWidth:'180px',
      printVisible:false,
      popupLoading:false,
      popupData:{
      }
    }
  },
  components:{ transPrint },
  watch:{},
  filters:{
    //   1 待处理2待下架3部分下架4已完成
    stateFilter(value, lan){
      return [lan('m.quality.state1'), lan('m.shelves.state5')][value]
    }
  },
  computed:{},
  methods:{
    rowClassName({ row }){
      if (row.detailstate == 1){
        return 'success-row'
      }
      return ''
    },
    lan(arg){
      return this.$t(arg)
    },
    getInfo(){
      this.$axios({
        method:'get',
        url:`/takeoff/${this.id}`
      }).then(({data})=> {
        this.formInline = data
        this.tableData = data.detailList
        this.formInline.createdate = common.timestampToTime(
          data.createdate
        )
        this.formInline.taskoffdate = common.timestampToTime(
          data.taskoffdate
        )
        this.status_loading = false
      })
    },
    print(row){
      this.printVisible = true
      this.popupData.detailList=row
      this.popupData.code=this.formInline.takeoffcode
    }
  },
  created(){
    this.status_loading = true
    this.id = this.$route.query.id
    this.opt = this.$route.query.opt
    if (this.id){
      this.getInfo()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>